<template>
  <div>
    <mt-header fixed title="我的">
      <router-link to="/msite" slot="left">
        <i class="iconfont icon-arrow_lift"></i>
      </router-link>
    </mt-header>
    <div class="header-b">
      <p class="header-bl">
        <i class="iconfont icon-touxiang"></i>
      </p>
      <router-link to="/login">
        <div class='header-bc'>
          <h1>登录/注册</h1>
          <p>
            <i class="iconfont icon-shouji"></i>登录后享受更多特权</p>
        </div>
        <p class="header-br">
          <i class="iconfont icon-icon"></i>
        </p>
      </router-link>
    </div>
    <div class="main">
      <div class="main-t">
        <ul>
          <li>
            <p>
              <i class="iconfont icon-gouwudai"></i>
            </p>
            <p>优惠</p>
          </li>
          <li>
            <p>
              <i class="iconfont icon-jifen"></i>
            </p>
            <p>积分</p>
          </li>
        </ul>
      </div>
      <div class="main-m">
        <p :key="index" v-for="(item,index) in profileList[0]">
          <i class="iconfont" :class="item.icon" :style="{color:item.color}"></i>
          <span>{{item.name}}</span>
          <i class="iconfont icon-icon"></i>
        </p>
      </div>
      <div class="main-b">
        <p :key="index" v-for="(item,index) in profileList[1]">
          <i class="iconfont" :class="item.icon" :style="{color:item.color}"></i>
          <span>{{item.name}}</span>
          <i class="iconfont icon-icon"></i>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  name: 'porfile',
  methods: {
    ...mapMutations({
      showTab: 'SHOWTAB'
    })
  },
  mounted: function () {
    this.showTab()
  },
  data () {
    return {
      profileList: [
        [
          {
            name: '我的订单',
            icon: 'icon-wodedingdan',
            color: 'rgb(74, 165, 240)'
          },
          {
            name: '积分商城',
            icon: 'icon-gouwudai',
            color: 'rgb(252, 123, 83)'
          },
          {
            name: '饿了么会员卡',
            icon: 'icon-huangguan',
            color: 'rgb(255, 198, 54)'
          }
        ],
        [
          {
            name: '服务中心',
            icon: 'icon-hua',
            color: 'rgb(74, 165, 240)'
          },
          {
            name: '下载饿了么APP',
            icon: 'icon-elmyhq',
            color: 'rgb(74, 165, 240)'
          }
        ]
      ]
    }
  },
  computed: {
  }
}
</script>

<style scoped lang='scss'>
@import '../../static/hotcss/px2rem.scss';
.mint-header {
  height: px2rem(88);
  font-size: px2rem(36);
  background-image: linear-gradient(90deg, #0af, #0085ff);
}

.mint-header a {
  text-decoration: none;
}

.mint-header i {
  font-size: px2rem(36);
}

.header-b {
  width: 100%;
  padding: px2rem(50) px2rem(30);
  height: px2rem(220);
  background-image: linear-gradient(90deg, #0af, #0085ff);
  position: fixed;
  left: 0;
  top: px2rem(88);
  display: flex;
  .header-bl {
    width: px2rem(120);
    height: px2rem(120);
    background: #fff;
    margin: 0 px2rem(17);
    border-radius: px2rem(60);
    text-align: center;
    line-height: px2rem(120);
    overflow: hidden;
    i {
      font-size: px2rem(120);
      color: #CCCCCC;
    }
  }
  a {
    text-decoration: none;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 75%;
    .header-bc {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 70%;
      h1 {
        font-size: px2rem(40);
        line-height: px2rem(70);
      }
      p {
        font-size: px2rem(24);
        line-height: px2rem(50);
        i {
          font-size: px2rem(24);
        }
      }
    }
    .header-br {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      i {
        font-size: px2rem(40);
      }
    }
  }
}

.main {
  width: 100%;
  height: 100%;
  background: #F5F5F5;
  position: fixed;
  left: 0;
  top: px2rem(308);
  padding-bottom: px2rem(200);
  .main-t {
    width: 100%;
    ul {
      width: 100%;
      height: px2rem(167);
      display: flex;
      background: #fff;
      line-height: px2rem(60);

      li {
        padding: px2rem(20) 0;
        flex: 1;
        border: 1px solid #F5F5F5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p:nth-child(1) {
          i {
            display: inline-block;
            font-size: px2rem(30);
            width: px2rem(60);
            height: px2rem(60);
            background: #55A532;
            text-align: center;
            line-height: px2rem(60);
            border-radius: px2rem(30);
            color: #fff;
          }
        }
        p:nth-child(2) {
          font-size: px2rem(24);
        }
      }
      li:nth-child(1) {
        p {
          i {
            background: palevioletred;
          }
        }
      }
    }
  }
  .main-m {
    width: 100%;
    margin-top: px2rem(40);
    p {
      background: #fff;
      border-bottom: 1px solid #bbb;
      padding: 0 px2rem(20);
      width: 100%;
      height: px2rem(72);
      line-height: px2rem(72);
      display: flex;
      justify-content: space-between;
      span {
        display: inline-block;
        width: 80%;
        font-size: px2rem(30);
      }
      i {
        font-size: px2rem(30);
        margin: 0 px2rem(20);
      }
    },
    p:nth-child(1){

    }
  }
  .main-b {
    width: 100%;
    margin-top: px2rem(40);
    p {
      background: #fff;
      border-bottom: 1px solid #bbb;
      padding: 0 px2rem(20);
      width: 100%;
      height: px2rem(72);
      line-height: px2rem(72);
      display: flex;
      justify-content: space-between;
      span {
        display: inline-block;
        width: 80%;
        font-size: px2rem(30);
      }
      i {
        font-size: px2rem(30);
        margin: 0 px2rem(20);
      }
    }
  }
}
</style>
